<script setup lang="ts">
import {HomeFilled, List, Location, Search, ShoppingCart, User, UserFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {ref, onMounted, defineEmits} from "vue";
import {getUserNickName} from "@/api/contractHomepage/docContractHome";

// 接收父组件标题
import { defineProps } from 'vue';
const props = defineProps<{ title: string }>();

const emits = defineEmits<{ (e: 'search', query: string): void }>();
const searchKeyword = ref(''); // 搜索关键词

const handleSearch = () => {
  // 点击搜索按钮才触发
  emits('search', searchKeyword.value.trim());
};

// 路由跳转
const router = useRouter();
const goHome = () => router.push('/contractHomepage');                 // 跳转到签约首页
const goFamilyDetails = () => router.push('/familyDetails');           // 跳转到家庭详情
const goPendingTeams = () => router.push('/pendingTeams');             // 跳转到待签约团队
// const goSignedOrders = () => router.push('/signedOrders');             // 跳转到签约订单

const goSignedOrders = () => router.push('/orderManagement');

const goSignedOrderHistory = () => router.push('/signedOrderHistory'); // 跳转到已签约订单

// 用户昵称（从接口获取）
const userAccount = ref('');
onMounted(async () => {
  try {
    const res = await getUserNickName();
    userAccount.value = res; // 后端返回昵称字符串
  } catch (error) {
    console.error('获取昵称失败', error);
    userAccount.value = '用户'; // 失败时默认显示
  }
});

</script>

<template>
  <div class="banner-card">
    <!-- 横幅内容 -->
    <div class="banner-content">
      <div class="left-section">
        <div class="banner-text">{{ props.title }}</div>
      </div>

      <div class="center-section">
        <el-input v-model="searchKeyword" placeholder="搜索团队" clearable style="width: 250px;"></el-input>
        <el-button type="primary" plain @click="handleSearch">
          <el-icon><Search/></el-icon>&nbsp;搜索
        </el-button>
      </div>

      <div class="right-section">
        <el-button-group>
          <!-- 假设用户已登录，直接展示 -->
          <el-button type="primary" plain>
            <el-icon><UserFilled/></el-icon>&nbsp;欢迎您：{{ userAccount }}
          </el-button>
          <el-button type="primary" plain @click="goFamilyDetails">
            <el-icon><Location/></el-icon>&nbsp;家庭详情
          </el-button>
          <el-button type="primary" plain @click="goPendingTeams">
            <el-icon><List/></el-icon>&nbsp;待签约团队
          </el-button>
          <el-button type="primary" plain @click="goSignedOrders">
            <el-icon><ShoppingCart/></el-icon>&nbsp;签约订单
          </el-button>
          <el-button type="primary" plain @click="goSignedOrderHistory">
            <el-icon><ShoppingCart/></el-icon>&nbsp;已签约订单
          </el-button>
          <el-button type="primary" plain @click="goHome">
            <el-icon><HomeFilled/></el-icon>&nbsp;签约首页
          </el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<style scoped>
.banner-card {
  background: white; /* 白色背景 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 12px; /* 圆角 */
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* 增加底部间距 */
}

.banner-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.left-section {
  flex: 1;
  font-size: 28px;
  font-weight: bold;
  color: #2a7fff;
  animation: colorChange 8s infinite; /* 颜色循环 */
}

.center-section {
  flex: 2;
  display: flex;
  gap: 12px;
  align-items: center;
}

.right-section {
  display: flex;
  justify-content: flex-end;
  gap: 8px; /* 调整按钮间距为更小的值 */
}

.el-input {
  width: 250px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 6px;
}

.el-button-group {
  display: flex;
  gap: 8px; /* 调整按钮组间隔 */
}

.el-button {
  background-color: #409eff;
  color: white;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px; /* 圆角按钮 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.el-button:hover {
  background-color: #327ad3; /* hover效果，颜色稍微变暗 */
  transform: translateY(-3px); /* 按钮悬停时轻微上升 */
}

.el-button:active {
  background-color: #296bb0; /* 点击时颜色变化 */
  transform: translateY(1px); /* 按钮点击时下沉 */
}

.el-button-group .el-button {
  margin-left: 8px;
}

/* 适应不同屏幕尺寸 */
@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    gap: 10px;
  }

  .left-section {
    text-align: center;
    font-size: 24px;
  }

  .center-section {
    width: 100%;
  }

  .right-section {
    justify-content: center;
  }
}

/* 颜色循环 */
@keyframes colorChange {
  0% {
    color: #2a7fff; /* 初始颜色蓝色 */
  }
  33% {
    color: #ff7f50; /* 橙色 */
  }
  66% {
    color: #32cd32; /* 绿色 */
  }
  100% {
    color: #2a7fff; /* 蓝色 */
  }
}
</style>
